<template>
  <div class="map-timeline" :style="timeStyle" ref="timeLineBox">
    <el-radio-group v-model="currentTime" :style="{ '--primary': theme }">
      <template v-for="(time, index) of timeLayers">
        <div
          :class="{ line: true, active: currentIndex >= index }"
          v-if="index > 0"
          :key="index"
        ></div>
        <el-radio
          @change="handelChangeTime(time, index)"
          :class="{ active: currentIndex >= index }"
          :label="time.id"
          :key="time.id"
          >{{ time.id }}</el-radio
        >
      </template>
    </el-radio-group>
    <div class="play">
      <svg-icon :icon-class="iconStats" @click.native="handlePlay"></svg-icon>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    timeLayers: {
      type: Array,
      default: () => [],
    },
    current: Number,
    interval: {
      type: Number,
      default: 10000,
    },
  },
  inject: [],
  data() {
    return {
      currentTime: '',
      timeStyle: {},
      playState: false,
      timer: null,
    }
  },
  mounted() {
    this.currentTime = this.timeLayers[this.current].id
    this.$nextTick(() => {
      this.timeStyle = {
        left: `${
          (document.querySelector('body').offsetWidth -
            310 -
            this.$refs.timeLineBox.offsetWidth) /
            2 +
          310
        }px`,
      }
    })
  },
  methods: {
    handelChangeTime(time, index) {
      this.$emit('changeTimeLine', time, index)
      this.playState = false
      this.clearTimer()
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    handlePlay() {
      this.playState = !this.playState
      if (this.playState) {
        this.clearTimer()
        this.timer = setInterval(() => {
          const index =
            this.currentIndex < this.timeLayers.length - 1
              ? this.currentIndex + 1
              : 0
          this.currentTime = this.timeLayers[index].id
          this.$emit('changeTimeLine', this.timeLayers[index], index)
        }, this.interval)
      } else {
        this.clearTimer()
      }
    },
  },
  beforeDestroyed() {
    this.clearTimer()
  },
  computed: {
    iconStats() {
      return this.playState ? '暂停' : '开始'
    },
    currentIndex() {
      return this.timeLayers.findIndex((i) => i.id === this.currentTime)
    },
    ...mapGetters(['theme']),
  },
}
</script>

<style lang="scss" scoped>
.map-timeline {
  position: absolute;
  bottom: 15px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  .el-radio-group {
    display: flex;
    .el-radio {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 0px;
      &.active {
        color: var(--primary);
        ::v-deep .el-radio__input .el-radio__inner {
          background-color: var(--primary);
          border-color: var(--primary);
        }
      }
    }
    .line {
      width: 30px;
      height: 1px;
      background: #cccccc;
      position: relative;
      top: 6px;
      &.active {
        background: var(--primary);
      }
    }
  }
  .play {
    position: absolute;
    bottom: 50px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.8);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    left: calc(50% - 15px);
  }
}
</style>
